<template>
  <div>
    <!-- 逛水果店 -->
    <ul>
      <p>欢迎光临边杰的水果店</p>
      <li class="tongzhi">通知:苹果{{ price }}元/斤,折扣[{sale}]折</li>
      <li>
        请输入你要购买的斤数<input type="text" placeholder="0" v-model="num" />
      </li>
      <li><button @click="fn">结账买单</button></li>
      <li>结账单:总价:{{ add }}元,折后价:{{ add1 }}元,省了:{{ add2 }}元</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 10,
      sale: 8,
      num: 2,
      add: "",
      add1: "",
      add2: "",
    };
  },
  methods: {
    fn() {
      (this.add = this.num * this.price),
        (this.add1 = this.price * (this.sale / 10) * this.num),
        (this.add2 =
          this.num * this.price - this.price * (this.sale / 10) * this.num);
    },
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
ul {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 200px;
  background-color: #f5d7db;
  margin: 200px auto;
}
p {
  font-size: 20px;
  color: coral;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
li {
  flex: 1;
  list-style: none;
  border: 1px solid #b5cea8;
  margin-top: 5px;
  text-align: center;
}
.tongzhi {
  text-align: center;
  font-weight: 700;
  padding-top: 5px;
  color: red;
}
</style>
